<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
        html,body{
            position: relative;
            margin: 0;
            padding: 0;
            list-style: none;
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .title{
            width: 100%;
            height:40px;
            background: red;
            color: #fff;
            position: absolute;
            top: 0px;
            left: 0;
        }
        .foot{
            width: 100%;
            height:40px;
            background: red;
            color: #fff;
            position: absolute;
            bottom: 0px;
            left: 0;
            background: #333;
            color: #fff;
        }
        .body-box{
            height: calc(100% - 80px);
            width: 100%;
            position: absolute;
            top: 40px;
            left: 0;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .b-line{
            border-bottom: 1px solid #999;
        }
        .down{
            width: 100%;
            background: cadetblue;
            color: #fff;
            line-height:100%;
            height: 0;
            /*transition: height 0.1s;*/
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<!--<link rel="stylesheet" href="scroll-loa//ding.css">-->

<body>
<div class="title">标题</div>
<div class="body-box" id="app">
    <ul>
        <li class="b-line">00000000000000</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
        <li class="b-line">111111111111111</li>
    </ul>
</div>
<div class="foot">底部</div>
</body>
<script type="text/javascript" src="scroll-loading.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript">
    /*function log(a) {
        console.log(a);
    }
    var s_top = 0;
    var t_start = 0;
    var dom = document.querySelector("#app");
    dom.addEventListener('touchstart',function (even) {
//        console.log(even.targetTouches);
        console.log('start:' + even.targetTouches[0].pageY);
        s_top = $("#app").scrollTop();
        t_start = even.targetTouches[0].pageY;
    });
    dom.addEventListener('touchmove',function (event) {
        //console.log(event.targetTouches[0].pageY);
        var top_h = $("#app").scrollTop();
        //log(top_h);
        var t_move = 0;
        if(t_start - event.targetTouches[0].pageY < 0){
            t_move = -(t_start - event.targetTouches[0].pageY) - s_top;
            log(t_move);
        }
        $(".down").height(t_move*0.4);
        if(top_h <= 0 && (-(t_start - event.targetTouches[0].pageY) - s_top) > 0){
            event.preventDefault();
        }
    });
    dom.addEventListener('touchend',function () {
        $(".down").animate({height:"4px"});
    });*/
    /*new Vue({
        el:'#app',
        data: {
            list: new Array,
            start: 1,
            count: 20,
            load_lock: 1
        },
        mounted:function(){
            var _this = this;
            this.get_list(this.start,this.count);
            $(".body-box").scroll(function(){
                _this.scroll_load();
            });
        },
        methods:{
            get_list:function(start,count){
                var _this = this;
                setTimeout(function(){
                    $.ajax({
                        url: 'http://127.0.0.1/get_json.php',
                        data:{
                            start: start,
                            count: count
                        },
                        success:function(data){
                            _this.list = _this.list.concat(eval('(' + data + ')'));
                            _this.load_lock = 0;
                        }
                    });
                },10);
            },
            scroll_load:function(){
                if (this.load_lock == 0) {
                    var height = $(".body-box ul").height() - $(".body-box").height() - $(".body-box").scrollTop();
                    console.log(height);
                    if (height < 40) {
                        this.start = this.start+this.count
                        this.get_list(this.start,this.count);
                        this.load_lock = 1;
                    }
                }
            }
        }
    });*/
</script>
</html>
